<template>
  <div id="app">
    <!-- 购物车空状态提示 -->
    <div v-if="isCartEmpty" class="empty-cart">
      <h2>购物车为空</h2>
      <p>请选择需要购买的早餐~</p>
    </div>

    <!-- 图片预览弹窗（默认隐藏） -->
    <div v-if="showImageModal" class="image-modal" @click="closeImageModal">
      <div class="modal-content" @click.stop>
        <span class="close-btn" @click="closeImageModal">&times;</span>
        <img :src="currentImageUrl" :alt="currentImageName" class="preview-image">
      </div>
    </div>

    <!-- 菜单表格（新增“查看图片”列） -->
    <table border="1" align="center" width="1200" class="menu-table">
      <caption>
        <h2>小高早餐店</h2>
      </caption>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>合计</th>
          <th>查看图片</th> <!-- 新增列标题 -->
        </tr>
      </thead>
      <tbody>
        <!-- 1. 肠粉米粉类 -->
        <tr class="category-title">
          <td colspan="6">肠粉米粉类</td> <!-- 列数从5改为6 -->
        </tr>
        <tr v-for="item in categoryData.vermicelli" :key="item.id" align="center" class="menu-item">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ filter(item.price) }}</td>
          <td>
            <button @click="decrement(item.id)" :disabled="item.count <= 0" class="btn">-</button>
            {{ item.count }}
            <button @click="increment(item.id)" class="btn">+</button>
          </td>
          <td>{{ filter(item.count * item.price) }}</td>
          <!-- 新增：查看图片按钮 -->
          <td>
            <button @click="openImageModal(item.imageUrl, item.name)" class="image-btn">
              查看图片
            </button>
          </td>
        </tr>

        <!-- 2. 包子馒头类 -->
        <tr class="category-title">
          <td colspan="6">包子馒头类</td> <!-- 列数从5改为6 -->
        </tr>
        <tr v-for="item in categoryData.buns" :key="item.id" align="center" class="menu-item">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ filter(item.price) }}</td>
          <td>
            <button @click="decrement(item.id)" :disabled="item.count <= 0" class="btn">-</button>
            {{ item.count }}
            <button @click="increment(item.id)" class="btn">+</button>
          </td>
          <td>{{ filter(item.count * item.price) }}</td>
          <!-- 新增：查看图片按钮 -->
          <td>
            <button @click="openImageModal(item.imageUrl, item.name)" class="image-btn">
              查看图片
            </button>
          </td>
        </tr>

        <!-- 3. 油炸点心类 -->
        <tr class="category-title">
          <td colspan="6">油炸点心类</td> <!-- 列数从5改为6 -->
        </tr>
        <tr v-for="item in categoryData.fried" :key="item.id" align="center" class="menu-item">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ filter(item.price) }}</td>
          <td>
            <button @click="decrement(item.id)" :disabled="item.count <= 0" class="btn">-</button>
            {{ item.count }}
            <button @click="increment(item.id)" class="btn">+</button>
          </td>
          <td>{{ filter(item.count * item.price) }}</td>
          <!-- 新增：查看图片按钮 -->
          <td>
            <button @click="openImageModal(item.imageUrl, item.name)" class="image-btn">
              查看图片
            </button>
          </td>
        </tr>

        <!-- 4. 蒸制点心类 -->
        <tr class="category-title">
          <td colspan="6">其他类</td> <!-- 列数从5改为6 -->
        </tr>
        <tr v-for="item in categoryData.steamed" :key="item.id" align="center" class="menu-item">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ filter(item.price) }}</td>
          <td>
            <button @click="decrement(item.id)" :disabled="item.count <= 0" class="btn">-</button>
            {{ item.count }}
            <button @click="increment(item.id)" class="btn">+</button>
          </td>
          <td>{{ filter(item.count * item.price) }}</td>
          <!-- 新增：查看图片按钮 -->
          <td>
            <button @click="openImageModal(item.imageUrl, item.name)" class="image-btn">
              查看图片
            </button>
          </td>
        </tr>

        <!-- 总价格行 -->
        <tr class="total-row">
          <td colspan="3">总价格</td> <!-- 列数从2改为3，适配新增列 -->
          <td colspan="3">{{ filter(totalPrice) }}</td> <!-- 列数从3改为3 -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { computed, reactive, toRefs, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      // 原有菜品数据：为每个菜品新增 imageUrl 字段（替换为你的实际图片链接）
      books: [
        { id: 1, name: '蛋肠', price: 5, count: 0, imageUrl: 'https://img0.baidu.com/it/u=3698293611,1093082168&fm=253&app=138&f=JPEG?w=800&h=1067' },
        { id: 2, name: '肉肠', price: 5, count: 0, imageUrl: 'https://qcloud.dpfile.com/pc/6xFk0w7ynihK9H8D43fhE0uUtgZqhsVhj8BwXCmx2pXilxcLF3tBS7MeP88pCKDF.jpg' },
        { id: 3, name: '蛋肉肠', price: 6, count: 0, imageUrl: 'https://qcloud.dpfile.com/pc/n2FRFRt1Rcm5QGUddFqiqiE1UDxmNF8Una0HkRSmlDDIwZSW9T2FURdfiDigPDjsAsjew4BovU6axjPJM2w4nrGzA5roSQdOIZBdpbY56uQFaWqA0j7ta3_A22czT6CvR2wBLHpNWleM8u_F-3h0csaq1-bq6jn4ci07g10pOcR8r-pAC7Z8Me1lmvv-C1rCtuD2Ttc33o2oiy9iGY5KAqS8eU1WRISyVZ5oaCuzdo9GQLj2BUn2Fvl5kTJ57OrBF71mYN0a8QgyjWdwktTu-cUDnOwi2G9h3CwlmvUeT-6IX1x8IcdC5UUwH5RqfLIsE1sgoF6okCnFfXl9rBAvz8FnowZYK4ceX3OVbVyN7CvkdLPtM7Qhu-5cOXcgfglxkzNIfpCrIG6E8pGjNbWE8nXbFwGNjZo9c9Z6Vy4CHQ7qtJlzaLV2abhdoP7WVQK3Ef4oG-QCuFbBACo7HPEn7Xr70gCcopIf4ISpYtgJUFc5koQbR7qtYnjgb4nKg60IngjvItjm2Pi9k9HGxctJL3iwTu_9PoM68-B3FwT_ZzXTtMzAm9Ao1OzMu6UzwwhDcnevFMP8gjC5vn_-sW8cW1E6ydPph68pn_IBwOnU5FwwXQKcVMr19MQGdAcvTpBH.jpg' },
        { id: 4, name: '蛋蒸米粉', price: 5, count: 0, imageUrl: 'https://p3.ssl.qhimgs3.com/t01849f92b8f9b57700.jpg' },
        { id: 5, name: '肉蒸米粉', price: 5, count: 0, imageUrl: 'https://pic.rmb.bdstatic.com/bjh/bc114086c2ed/250104/8dcd0ad83c683ea25c5762384dc1df42.jpeg' },
        { id: 6, name: '蛋肉蒸米粉', price: 6, count: 0, imageUrl: 'https://p3.ssl.qhimgs3.com/t018650132c0c521bd0.jpg' },
        { id: 7, name: '豆浆', price: 1, count: 0, imageUrl: 'https://img0.baidu.com/it/u=3013447886,3799195658&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
        { id: 8, name: '肉包', price: 1, count: 0, imageUrl: 'https://img2.baidu.com/it/u=3977671838,3753812547&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=349' },
        { id: 9, name: '奶黄包', price: 1, count: 0, imageUrl: 'https://img0.baidu.com/it/u=2064741680,3352874177&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500' },
        { id: 10, name: '豆沙包', price: 1, count: 0, imageUrl: 'https://img1.baidu.com/it/u=3982667304,1045340826&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500' },
        { id: 11, name: '小叉烧', price: 1, count: 0, imageUrl: 'https://img1.baidu.com/it/u=1108952272,220860491&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750' },
        { id: 12, name: '玉米馒头', price: 1.5, count: 0, imageUrl: 'https://img1.baidu.com/it/u=620444440,1592530087&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422' },
        { id: 13, name: '白馒头', price: 1, count: 0, imageUrl: 'https://img2.baidu.com/it/u=3260418036,2192354684&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800' },
        { id: 14, name: '油条', price: 1.5, count: 0, imageUrl: 'https://img1.baidu.com/it/u=2660425692,1325656697&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067' },
        { id: 15, name: '烧麦1个', price: 1.5, count: 0, imageUrl: 'https://img2.baidu.com/it/u=4204884914,2340536938&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750' },
        { id: 16, name: '大麻球', price: 1.5, count: 0, imageUrl: 'https://img0.baidu.com/it/u=4214926451,1134822666&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1134' },
        { id: 17, name: '韭菜盒子', price: 2, count: 0, imageUrl: 'https://img0.baidu.com/it/u=551334522,92978835&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1112' },
        { id: 18, name: '核桃包', price: 2, count: 0, imageUrl: 'https://img1.baidu.com/it/u=2245687156,1327193369&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667' },
        { id: 19, name: '马拉糕', price: 2, count: 0, imageUrl: 'https://img0.baidu.com/it/u=864632,1350493132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 20, name: '糯米卷', price: 2, count: 0, imageUrl: 'https://img2.baidu.com/it/u=1215098710,3262177447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=822' },
        { id: 21, name: '大叉烧包', price: 2.5, count: 0, imageUrl: 'https://img1.baidu.com/it/u=1651637451,3087209562&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { id: 22, name: '燕麦包', price: 2.5, count: 0, imageUrl: 'https://img0.baidu.com/it/u=2293612478,288556321&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 23, name: '火腿包', price: 2, count: 0, imageUrl: 'https://img2.baidu.com/it/u=3645896860,1855599834&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
        { id: 24, name: '糯米鸡', price: 3, count: 0, imageUrl: 'https://img1.baidu.com/it/u=2327322043,467054760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 25, name: '小笼包', price: 5, count: 0, imageUrl: 'https://img2.baidu.com/it/u=1664680557,840170666&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1069' },
        { id: 26, name: '玉米蒸饺', price: 5, count: 0, imageUrl: 'https://img1.baidu.com/it/u=438002787,300544075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666' },
        { id: 27, name: '水晶包', price: 6, count: 0, imageUrl: 'https://img2.baidu.com/it/u=2688165417,2087619369&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        { id: 28, name: '糯米烧麦4个', price: 6, count: 0, imageUrl: 'https://img2.baidu.com/it/u=4204884914,2340536938&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750' }
      ]
    });

    // 新增：图片预览相关状态
    const showImageModal = ref(false); // 弹窗显示/隐藏
    const currentImageUrl = ref(''); // 当前预览图片地址
    const currentImageName = ref(''); // 当前预览图片名称

    // 分类处理（保持不变）
    const categoryData = computed(() => ({
      vermicelli: state.books.filter(item =>
        item.name.includes('肠') || item.name.includes('米粉')
      ),
      buns: state.books.filter(item =>
        item.name.includes('包') || item.name.includes('馒头')
      ),
      fried: state.books.filter(item =>
        ['大油条', '大麻球', '韭菜盒子'].includes(item.name)
      ),
      steamed: state.books.filter(item =>
        item.name.includes('饺子') || ['糯米鸡', '糯米卷', '马拉糕', '糯米烧麦','豆浆'].includes(item.name)
      )
    }));

    // 购物车空状态判断（保持不变）
    const isCartEmpty = computed(() => {
      return state.books.every(item => item.count === 0);
    });

    // 总价格计算（保持不变）
    const totalPrice = computed(() => {
      return state.books.reduce((sum, item) => {
        return sum + item.price * item.count;
      }, 0);
    });

    // 数量增减（保持不变）
    const increment = (id) => {
      const item = state.books.find(item => item.id === id);
      if (item) item.count++;
    };

    const decrement = (id) => {
      const item = state.books.find(item => item.id === id);
      if (item && item.count > 0) item.count--;
    };

    // 价格格式化（保持不变）
    const filter = (price) => {
      return `¥${price.toFixed(2)}`;
    };

    // 新增：打开图片预览弹窗
    const openImageModal = (url, name) => {
      currentImageUrl.value = url;
      currentImageName.value = name;
      showImageModal.value = true;
      // 打开弹窗时禁止页面滚动
      document.body.style.overflow = 'hidden';
    };

    // 新增：关闭图片预览弹窗
    const closeImageModal = () => {
      showImageModal.value = false;
      currentImageUrl.value = '';
      currentImageName.value = '';
      // 关闭弹窗时恢复页面滚动
      document.body.style.overflow = '';
    };

    return {
      ...toRefs(state),
      categoryData,
      isCartEmpty,
      totalPrice,
      increment,
      decrement,
      filter,
      // 新增：图片预览相关方法和状态
      showImageModal,
      currentImageUrl,
      currentImageName,
      openImageModal,
      closeImageModal
    };
  }
};
</script>

<style lang="scss" scoped>
#app {
  background-color: #fff;
  min-height: 100vh;
  padding: 20px 0;
  font-family: Arial, sans-serif;
}

.empty-cart {
  text-align: center;
  color: #666;
  padding: 50px 0;
}

.empty-cart h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.empty-cart p {
  font-size: 16px;
  color: #999;
}

.menu-table {
  border-collapse: collapse;
  margin: 20px auto;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.menu-table caption h2 {
  color: #333;
  margin-bottom: 15px;
  font-size: 22px;
}

.menu-table th,
.menu-table td {
  border: 1px solid #eee;
  padding: 12px 8px;
  color: #333;
  font-size: 14px;
}

.menu-table thead tr {
  background-color: #f8f9fa;
  font-weight: 600;
}

.category-title {
  background-color: #e8f4f8;
  font-weight: bold;
  color: #2c7fb8;
  text-align: left;
  padding-left: 20px;
}

.category-title td {
  padding: 8px 20px;
  font-size: 15px;
}

.menu-item:hover {
  background-color: #fafafa;
}

.btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: #fff;
  cursor: pointer;
  margin: 0 8px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.total-row {
  background-color: #fff8e6;
  font-weight: bold;
}

.total-row td {
  color: #e67e22;
  font-size: 15px;
}

/* 新增：查看图片按钮样式 */
.image-btn {
  border: none;
  border-radius: 4px;
  background-color: #2c7fb8;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.image-btn:hover {
  background-color: #1e6aa3;
}

/* 新增：图片预览弹窗样式 */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* 确保弹窗在最上层 */
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  object-fit: contain;
  /* 保持图片比例，不拉伸 */
}

.close-btn {
  position: absolute;
  top: -30px;
  right: 0;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #ccc;
}
</style>